import 'package:audioplayers/audioplayers.dart';
import 'package:emphasize_word/provider.dart';
import 'package:emphasize_word/utils/request.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class WordCard extends StatelessWidget {
  const WordCard({
    Key? key,
    required this.mydata,
    required this.index,
    required this.similar,
  }) : super(key: key);

  final mydata;
  final int index;
  final int similar;

  @override
  Widget build(BuildContext context) {
    ListSave provider = Provider.of<ListSave>(context);
    DisplayEnglish providerDisplay = Provider.of<DisplayEnglish>(context);
    var colors = [
      Color(0xFFFE6F61),
      Color(0xFF50B9FE),
      Color(0xFF40D59D),
      Color(0xFFFF773F),
      Color(0xFF96A3FF),
    ];
    return Container(
      margin: EdgeInsets.only(
        top: MediaQuery.of(context).size.width * 0.0125,
        left: MediaQuery.of(context).size.width * 0.01,
        right: MediaQuery.of(context).size.width * 0.01,
      ),
      child: Material(
        color: Colors.transparent,
        child: Dismissible(
          background: Container(
            color: colors[index % 5],
            child: Center(
              child: Text(
                mydata["word"],
                style: TextStyle(
                  color: Colors.white24,
                  fontSize: 30,
                  // fontWeight: FontWeight.w100,
                ),
              ),
            ),
          ),
          confirmDismiss: (direction) {
            return Future.delayed(Duration(microseconds: 1000), () {});
          },
          key: new Key("$index"),
          child: Stack(
            children: [
              card_cont(
                similar: similar,
                mydata: mydata,
                provider: provider,
                index: index,
                providerDisplay: providerDisplay,
              ),
              // Positioned(
              //   child: Text(
              //     "${index + 1}",
              //     style: TextStyle(
              //       color: similar > 3 ? Colors.white : Colors.grey[400],
              //       fontSize: 10,
              //     ),
              //   ),
              //   top: 22,
              //   left: 5,
              // ),
            ],
          ),
        ),
      ),
    );
  }
}

class card_cont extends StatelessWidget {
  const card_cont({
    Key? key,
    required this.similar,
    required this.mydata,
    required this.provider,
    required this.index,
    required this.providerDisplay,
  }) : super(key: key);

  final int similar;
  final mydata;
  final ListSave provider;
  final int index;
  final DisplayEnglish providerDisplay;

  @override
  Widget build(BuildContext context) {
    return Ink(
      decoration: BoxDecoration(
          // borderRadius: BorderRadius.circular(10),
          color: Colors.white,
          border: Border(
            left: BorderSide(
              width: MediaQuery.of(context).size.width * 0.007 > 6
                  ? MediaQuery.of(context).size.width * 0.007
                  : 6,
              color: Color.fromRGBO(
                66,
                165,
                245,
                similar / 15,
              ),
            ),
          )),
      width: MediaQuery.of(context).size.width,
      child: InkWell(
        onTap: () {
          AudioPlayer().play(
            "https://dict.youdao.com/dictvoice?audio=${mydata["word"]}&type=1",
          );
        },
        child: Container(
          child: Row(
            children: [
              Text(
                "${index + 1}",
                style: TextStyle(
                  color: Colors.grey[400],
                  fontSize: 10,
                ),
              ),
              IconButton(
                onPressed: () {
                  if (similar > 0) {
                    provider.minusSimilar(index, context);
                  }
                },
                icon: Icon(
                  Icons.expand_more,
                  color: Colors.black12,
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.3,
                child: Center(
                  child: Text(
                    mydata["word"],
                    style: TextStyle(
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Center(
                  child: MediaQuery.of(context).size.width < 400
                      ? Text(
                          "${mydata["trans"]}",
                          style: TextStyle(
                            color: providerDisplay.display == 1
                                ? Colors.white
                                : Colors.black,
                          ),
                        )
                      : RichText(
                          text: TextSpan(
                              text: "[${mydata["vocal"]}]   ",
                              style: TextStyle(
                                color: providerDisplay.display == 1
                                    ? Colors.white
                                    : Colors.grey[400],
                              ),
                              children: [
                                TextSpan(
                                  text: "${mydata["trans"]}",
                                  style: TextStyle(
                                    color: providerDisplay.display == 1
                                        ? Colors.white
                                        : Colors.black,
                                  ),
                                )
                              ]),
                        ),
                ),
              ),
              IconButton(
                onPressed: () {
                  if (similar < 15) {
                    provider.addSimilar(index, context);
                  }
                },
                icon: Icon(
                  Icons.expand_less,
                  color: Colors.black12,
                ),
              ),
            ],
          ),
          padding: EdgeInsets.all(
            MediaQuery.of(context).size.width * 0.0125,
          ),
        ),
      ),
    );
  }
}
